<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、介绍</h2>
  <div>利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等</div>
  <br>
  <h2>二、单位</h2>
  <div>相对长度单位：em、ex、ch、rem、vw、vh、vmin、vmax、%</div>
  <br>
  <div>绝对长度单位：cm、mm、in、px、pt、pc</div>
  <br>
  <div>px:每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中</div>
  <br>
  <div>em:html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  这样 12px = 1.2em, 10px = 1em</div>
  <br>
  <div>相对的只是HTML根元素font-size的值 html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */ </div>
  <ul>
    <li>rem单位可谓集相对大小和绝对大小的优点于一身</li>
    <li>和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸</li>
  </ul>
  <br>
  <div>vh、vw:vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度</div>
  <h2>三、总结</h2>
  <div>「px」：绝对单位，页面按精确像素展示</div>
  <br>
  <div>「em」：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值</div>
  <br>
  <div>「rem」：相对单位，可理解为root em, 相对根节点html的字体大小来计算</div>
  <br>
  <div>「vh、vw」：主要用于页面视口大小布局，在页面布局上更加方便简单</div>
</body>
</html>